<template v-if="visible">
    <a-modal v-model:open="visible" :title="title" @ok="handleOk">
        <a-form
            ref="formRef"
            :model="formState"
            :rules="rules"
            :label-col="{ span: 4 }"
            autocomplete="off"
            v-if="visible"
        >
            <a-form-item label="年份" name="year">
                <a-input v-model:value="formState.year" />
            </a-form-item>
            <a-form-item label="扶贫政策" name="policys">
                <ListComp
                    :list="formState.policys"
                    :dataKey="'policys'"
                    @onEdit="onEdit"
                    @onDel="onDel"
                    @onAdd="onAdd"
                ></ListComp>
            </a-form-item>
            <a-form-item label="新闻动态" name="news">
                <ListComp
                    :list="formState.news"
                    :dataKey="'news'"
                    @onEdit="onEdit"
                    @onDel="onDel"
                    @onAdd="onAdd"
                ></ListComp
            ></a-form-item>
            <a-form-item label="服务信息" name="serves"
                ><ListComp
                    :list="formState.serves"
                    :dataKey="'serves'"
                    @onEdit="onEdit"
                    @onDel="onDel"
                    @onAdd="onAdd"
                ></ListComp>
            </a-form-item>
            <a-form-item label="最新动态" name="latest">
                <ListComp
                    :list="formState.latest"
                    :dataKey="'latest'"
                    @onDel="onDel"
                    @onEdit="onEdit"
                    @onAdd="onAdd"
                ></ListComp>
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue'
import type { FormInstance } from 'ant-design-vue'
import type { Ref } from 'vue'
import Lodash from 'lodash'

import ListComp from '../ListComp/index.vue'

import { toast } from '@/utils/common'
import { Edit } from '../../store'
import type { ItemResponse } from '../../type'

const defaultFormState = {
    id: '',
    year: '',
    policys: [],
    news: [],
    serves: [],
    latest: []
}

export default defineComponent({
    name: 'EditDialog',
    emits: ['refresh'],
    components: {
        ListComp
    },
    setup(props, { emit }) {
        const state = reactive({
            visible: false,
            title: '',
            formState: Lodash.cloneDeep(defaultFormState)
        })

        const constants = {
            rules: {
                year: {
                    required: true,
                    message: '请输入',
                    trigger: 'blur'
                }
            }
        }
        const components = {
            formRef: ref<FormInstance>()
        } as {
            formRef: Ref<FormInstance>
        }
        const methods = {
            open(row?: any) {
                state.title = row?.id ? '编辑' : '新增'
                if (row) {
                    row.policys = JSON.parse(row.policys)
                    row.news = JSON.parse(row.news)
                    row.serves = JSON.parse(row.serves) || []
                    row.latest = JSON.parse(row.latest) || []
                    state.formState = Lodash.cloneDeep(row)
                } else {
                    state.formState = Lodash.cloneDeep(defaultFormState)
                }
                state.visible = true
            },
            async handleOk() {
                const isOK = await components.formRef.value.validateFields()
                if (!isOK) return
                let params = Lodash.cloneDeep(state.formState)
                params.policys = JSON.stringify(params.policys)
                params.news = JSON.stringify(params.news)
                params.serves = JSON.stringify(params.serves)
                params.latest = JSON.stringify(params.latest)

                const res: any = await Edit(params)
                if (res.status === 201) {
                    toast('err', '', res.result.msg)
                    return
                }
                emit('refresh')
                state.visible = false
                toast()
            },
            onEdit(data: { key: string; index: number; value: string }) {
                state.formState[data.key] = state.formState[data.key].map(
                    //这里不直接复制的原因是因为vue3无法监听数组下标的变化
                    (item: any, i: number) => {
                        if (i === data.index) {
                            return data.value
                        } else {
                            return item
                        }
                    }
                )
                toast()
            },
            onDel(data: { key: string; index: number }) {
                state.formState[data.key] = state.formState[data.key].filter((el: any) => {
                    return el !== state.formState[data.key][data.index]
                })
                toast()
            },
            onAdd(data: { key: string }) {
                state.formState[data.key] = [...state.formState[data.key], '默认内容']
                toast()
            }
        }
        return {
            ...toRefs(state),
            ...methods,
            ...constants,
            ...components
        }
    }
})
</script>
